<template>
	<view style="width: 100%;">
		<view class="goodsinfo">
			<view class="go-title">{{formData.titlt}}</view>
			<view class="go-time">{{formData.create_time}}</view>
			<view class="go-text">
				<jyf-parser :html="formData.content" ref="article"></jyf-parser>
			</view>
			<view class="menu" style="align-items: center;">
				<view class="menu-share" style=" display: flex; align-items: center;">
					<image src="/static/images/fenxiang.png"></image>
					<button class="btn activ-share-but" open-type="share" style="padding: 0;margin: 0;background: none;">
						<text style="color: #333333;">分享</text>
					</button>
				</view>
				<view class="dianzan-wrap">
					<view class="dianzan" @tap="like(formData)">
						<image :src="formData.star.isStar ? '/static/images/dianzan_lan.png':'/static/images/dianzan_hei.png'"></image>
						<text style="padding-left: 5px;">赞 {{formData.star.list}}</text>
					</view>
					<view class="dianzan" style="padding-left: 30px;" @tap="commentTw()">
						<image src="/static/images/pinlun_hei.png"></image>
						<text style="padding-left: 5px;">评论 {{formData.msg.count}}</text>
					</view>
				</view>
			</view>
		</view>
		<view id="moments">
			<view class="moments__post" v-for="(item,index) in postList" :key="index">
				<view class="post-left">
					<image class="post_header" :src="item.user.avatar"></image>
				</view>
				<view class="post_right">
					<view style="display: flex;align-items: center;">
						<text class="post-username">{{item.user.nickname}}</text>
						<image src="/static/images/feng_hui.png" class="pos-user-img" v-if="item.user.level==2"></image>
						<image src="/static/images/luye_hui.png" class="pos-user-img" v-if="item.user.level==3"></image>
					</view>

					<text class="post-time">{{item.create_time}}</text>
					<view class="wrap">
						<view class="fload" :class="item.isFload ? 'hide' : 'show'">{{item.message}}
						<text style="font-size: 13px;color: #FF5F49;padding-left: 10px;"  @tap.stop="del(item,index)" v-if="item.owner == userId.id">删除</text>
						</view>
					</view>
					<view class="zhan" v-if="item.message.length > 40" v-show="!item.isFload" @click="fload(index,item)">
						<text>展开</text>
						<image src="/static/images/up_icon.png"></image>
					</view>
					<view class="zhan" v-if="item.message.length > 40" v-show="item.isFload" @click="fload(index,item)">
						<text>收起</text>
						<image src="/static/images/upward.png"></image>
					</view>

					<!-- 资料条 -->
					<view class="toolbar">

						<view class="dianzan-wrap">
							<view class="dianzan">
								<image :src="item.is_star ? '/static/images/dianzan_lan.png':'/static/images/dianzan_hei.png'"  @tap="like(item,2)"></image>
								<text style="padding-left: 5px;">{{item.star}}</text>
							</view>
							<view class="dianzan" style="padding-left: 30px;" @tap="commentPl(item,index)">
								<image src="/static/images/pinlun_hei.png"></image>
								<text style="padding-left: 5px;">{{item.msg}}				
								</text>
							</view>
						</view>
					</view>
					<!-- 赞／评论区 -->
					<view class="post-footer" v-for="(row,index_row) in item.sub_message" :key="index_row">
						<view class="footer-body">
							<view class="footer_content">
								<view style="display: flex;align-items: center;">
									<image class="liked" :src="row.user.avatar"></image>
									<text class="fookname">{{row.user.nickname}}</text>
								</view>
								<view class="fooftime">{{row.create_time}}</view>
							</view>
							<view style="padding-left: 27px;" @tap="commentPl(item,index,true)">
								<text style="font-size: 13px;color: ##e6e6e6;padding-left: 10px;" v-if="row.from>0">
									回复 {{row.from_user.nickname}}:
								</text>
								{{row.message}}
								<text style="font-size: 13px;color: #FF5F49;padding-left: 10px;"  @tap.stop="del(row)" v-if="row.owner == userId.id">删除</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="foot" v-show="showInput">
			<chat-input @send-message="send_comment" @blur="blur" :focus="focus" :placeholder="input_placeholder"></chat-input>
		</view>
		<!--整个结束-->
		<!--授权弹框-->
		<view class="search-body">
			<view class="dialog-container" v-if="tokenShow">
				<view class="dialog-mask"></view>
				<view class="dialog-info">
					<view class="dialog-title">您还未授权</view>
					<view class="dialog-content">请先授权再进行操作</view>
					<view class="dialog-footer">
						<button @click="dontLogin()" class="dialog-btn">暂不登录</button>
						<button @getuserinfo="getLogin" open-type="getUserInfo" class="dialog-btn" style="background-color:#FF5F49;color: #fff;">立即授权</button>
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import chatInput from '../../../components/im-chat/chatinput.vue'; //input框
import jyfParser from "@/components/jyf-parser/jyf-parser";
	export default {
		components: {
			chatInput,jyfParser
		},
		data() {
			return {
				postList: [],
				formData: "",
				showInput: false,
				focus: "",
				input_placeholder: "",
				id: 0, // 评论的id 
				index: '',
				isnum: "",
				pageId:"",
				userId:"",
				nickname:"",
				userInfo:"",
				token:"",
				tokenShow:""
			}
		},
		onLoad(option) {
			if (option.address) {
				this.pageId = option.address;
				this.getActivityInfo();
				this.messageList();
			}

		},
		onShow(){
			this.initData()
			let user = uni.getStorageSync('userInfo');
			if(user){
				user = JSON.parse(user);
				this.userId = user;
			}
		},
		methods: {
			fload(index, item) {
				this.token = uni.getStorageSync('accessToken')
				if(this.token==''){
					this.tokenShow = true;
				}
				if(this.token){
					console.log('isFload=' + item.isFload)
					if (item.isFload == true) {
						// item.isFload = false;
						this.$set(this.postList[index], 'isFload', false)
					} else {
						// item.isFload = true;
						this.$set(this.postList[index], 'isFload', true)
					}
					console.log("isFload = " + this.postList[index].isFload);
				}

			},
			isEmpty(array) {
				for (let i in array) {
					if (i) {
						return true;
					}
				}
				return false;
			},
			like(formData, type = 1) {
				this.token = uni.getStorageSync('accessToken')
				if(this.token==''){
					this.tokenShow = true;
				}
				if(this.token){
					if (type == 1) {
						if (formData.star.isStar) {
							this.formData.star.isStar = false;
							this.formData.star.list--;
						} else {
							this.formData.star.isStar = true;
							this.formData.star.list++;
						}
					}
					
					this.$http.post('/tweet/star', {
						id: formData.id,
						type: type
					}).then((response) => {
						this.messageList();
					});
				}
				
				
			},

			messageList() {
				console.log('请求评论列表');

				const param = {
					id: this.pageId
				};
				console.log(param);
				this.$http.get('/tweet/messageList', {
					params: param
				}).then((response) => {
					const res = response.data;
					if (res.code == 0) {
						this.postList = res.data.data;
						console.log(this.postList)
						console.log("this.postList")
					}
				});
			},
			// 评论推文
			send_comment: function(message) {
			this.token = uni.getStorageSync('accessToken')
				
				if(this.token==''){
					this.tokenShow = true;
				}
				if(this.token){
					console.log(message);
					console.log(this.formData);
					const param = {
						id: this.id,
						type: this.type,
						from: this.from, // 回复了谁
						message: message.content
					};
					
					console.log('param');
					console.log(param);
					this.$http.post('/tweet/message', param).then((response) => {
						const res = response.data;
						if(res.code==0){
							this.messageList();
							if (this.index !== '') {
								this.postList[this.index].star++;
							}
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
						if (this.type == 1) {
							this.formData.msg.count++;
						} else {
						}
					
					});
				}
				

				this.init_input();
			},
			// 点击推文
			commentTw() {
				this.showInput = true; //调起input框
				this.focus = true;

				this.from = 0;
				this.type = 1; // 回复的id
				this.id = this.formData.id;
				this.index = '';
			},
			// 点击评论区
			commentPl(item, index, from = 0) {
				this.token = uni.getStorageSync('accessToken')
				if(this.token==''){
					this.tokenShow = true;
				}
				if(this.token){
					let user = uni.getStorageSync('userInfo');
					user = JSON.parse(user);
					
					console.log(item)
					this.showInput = true; //调起input框
					this.focus = true;
					
					this.from = from ? user.id : 0; // 只有作者才可以回复
					this.type = 2; // 回复的id
					this.id = item.id;
					this.index = index;
					console.log('评论index' + index);
				}
				
				
				
			},
			del(item,index){
				this.token = uni.getStorageSync('accessToken')
				if(this.token==''){
					this.tokenShow = true;
				}
				if(this.token){
					console.log("删除id="+item.id);
					this.$http.post('/tweet/del', {
						id:item.id
					}).then((response) => {
						this.messageList();
					});
				}
				// 评论数量--
				if(index){
					this.formData.msg.count--;
				}

			},
			blur: function() {
				let that = this;
				setTimeout(function() {
					that.init_input();
				}, 100);
			},
			init_input() {
				this.showInput = false;
				this.focus = false;
				this.input_placeholder = '评论';
				this.is_reply = false;
			},
			//列表
			getActivityInfo() {
				const params = {
					id: this.pageId,
				}
				this.$http.get('/tweet/row', {
					params: params
				}).then((response) => {
					const res = response.data;
					console.log(res)
					if (res.code == 0) {
					this.formData = res.data;
					console.log(this.formData)
					this.formData.content = this.formData.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;margin:0 auto;width: 100%;display: block;"')
					} else {
					}
				})
			},
			
			//
			initData() {
			
				let that = this;
				let token = uni.getStorageSync('accessToken')
				console.log('accessToken')
				if (uni.getStorageSync('accessToken')) {
				this.$http.get('/user/info').then((response) => {
					
					const res = response.data;
					this.userInfo = res.data;
					console.log(this.userInfo);
					console.log("this.userInfo");
					if(this.userInfo.avatar) {
						this.avatar = this.userInfo.avatar;
					}
					// #ifdef  MP-WEIXIN
					uni.getUserInfo({
						provider: 'weixin',
						success: function (res) {
							console.log(res.userInfo);
							that.nickname = res.userInfo.nickName;
						}
					});
					// #endif
					uni.setStorageSync('userInfo', JSON.stringify(res.data));
				})
				}
			},
			dontLogin(){
				this.tokenShow = false
			},
			//授权
			getLogin() {
				var that = this;
				wx.login({
					//获取code 使用wx.login得到的登陆凭证，用于换取openid==token代替
					success(res) {
						if (res.code) {
							console.log(res.code);
							that.code = res.code;
							//使用 wx.getSetting 获取用户当前的授权状态。
							wx.getSetting({
								success(res) {
									if (res.authSetting['scope.userInfo']) { //已授权=>getUserInfo
										wx.getUserInfo({
											success(res) {
												console.log(res)
												console.log("ressss")
												console.log(that.userinfo)
												
												const formData = {
													code: that.code,
													avatar:res.userInfo.avatarUrl,
													nickname:res.userInfo.nickName
												}
												that.$http.post('/login/wxLogin', formData).then((response) => {
													const res = response.data;
													console.log(res.data.token);
													if(res.data.token){
														that.$http.setConfig((config) => { /* 设置全局配置 */
														  config.header = {
															...config.header,
															token: res.data.token,
														  }
														  return config
														})
														wx.setStorageSync("accessToken", res.data.token); //成功之后存入token
													}
													that.token = res.data.token;
													that.tokenShow = false;
													uni.showToast({title: res.msg, icon: 'none'});
												})
											},
											fail(err) {
												console.log(err)
											}
										})
									}
								}
							})
						} else {
							console.log("登录失败！" + res.errMsg);
						}
					}
				});
			}
		},
		onShareAppMessage() {
			return {
				title: this.formData.title,
				imageUrl: this.formData.atlas[0],
				path: `/pages/main/articleList/articleInfo?address=${this.formData.id}` 
			}
			console.log(path)
		},

	}
</script>

<style>
	@import url("/common/index/index.css");

	/*评论*/
	#moments {
		margin-top: 0;
		background: none;
	}

	.liked {
		width: 17px;
		height: 17px;
		border-radius: 50%;
	}
.foot{
	height: 50px;
	min-height: 50px;
	bottom: 0;
	background-color: #F7F7F7;
}
.footer-right .send-comment{
	margin-bottom: 10px;
}
.footer-center .input-text{
	margin-bottom: 10px;
}
		
	.post-username{
		padding-right: 10px;
	}


	#moments .moments__post .like {
		width: auto;
		height: auto;
		position: absolute;
		right: 0px;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		width: 77px;
		background-color: #F7F7F7;
		border-radius: 4px;
		padding: 10px;
		height: 26px;
		line-height: 26px;
	}

	.uni-input-placeholder {
		font-size: 15px;
		color: #C4C4C4;
	}

	#moments {
		margin-bottom: 50px;
	}

	#moments .moments__post .toolbar image {
		padding-left: 0;
	}

	#moments .moments__post .toolbar {
		justify-content: flex-end;
		margin-bottom: 10px;
	}

	.#moments .moments__post .toolbar .timestamp {
		font-size: 13px;
	}

	#moments .moments__post .post_right {
		padding-right: 10px;
	}

	#moments .moments__post .footer_content {
		justify-content: space-between;

	}

	#moments .moments__post {
		border-bottom: 1px solid #ECECEC;
		background: none;
	}

	.moments__post:last-child {
		border-bottom: none !important;
	}

	.dianzan-wrap {
		display: flex;
		flex-direction: row;
		color: #333333;
	}

	.dianzan image {
		width: 17px;
		height: 15px;
		vertical-align: sub;
	}

	.fookname {
		font-size: 14px;
		color: #333333;
		font-weight: bold;
	}

	.post-footer {
		border-radius: 4px;
		padding: 5px;
		margin-top: 0;
	}

	.fooftime {
		color: #999;
		font-size: 12px;
	}

	.post-username {
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100px;
		display: block;
	}

	.post-time {
		font-size: 12px;
		color: rgb(153, 153, 153);
		position: absolute;
		right: 20px;
		top: 20px;
	}

	.pos-user-img {
		height: 18px;
		width: 56px;
		vertical-align: sub;
	}

	.zhan {
		color: #426FB6;
	}

	.zhan image {
		width: 13px;
		height: 13px;
		margin-left: 5px;
	}

	.paragraph {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	/**/
	.fenxi {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		position: absolute;
		right: 0;
		top: 20px;
		width: 69px;
		height: 22px;
		background: rgba(247, 247, 247, 1);
		border-radius: 11px 0 0 11px;
		align-items: center;
		justify-content: center;
		color: #999999;
		font-size: 12px;

	}

	.fenxi image {
		width: 13px;
		height: 16px;
	}


	.wrap {
		display: flex;
		font-size: 26upx;
		justify-content: space-between;
		margin: 0 auto;
	}

	.fload {
		height: auto;
		display: -webkit-box;
		word-break: break-all;
		-webkit-box-orient: vertical;
		/* 要显示多少行就改变line-clamp的数据,此处折叠起来显示一行*/
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.hide {
		display: block;
	}

	.show {
		display: -webkit-box;
	}

	.goodsinfo {
		background-color: #fff;
		padding: 17px 17px 0 17px;
	}

	.go-title {
		color: #333333;
		font-size: 21px;
		font-weight: bold;
	}

	.go-time {
		color: #999999;
		font-size: 14px;
	}

	.go-text {
		color: #666666;
		font-size: 16px;
		border-bottom: 1px solid #F5F5F5;
		padding-bottom: 10px;
	}

	.menu {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 10px 0;
	}

	.menu-share image {
		width: 15px;
		height: 18px;
		vertical-align: middle;
		margin-right: 5px;
	}
	
	/*授权*/
	.dialog-mask {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
	}
	
	.dialog-info {
		position: fixed;
		z-index: 5000;
		width: 80%;
		max-width: 600rpx;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background-color: #ffffff;
		text-align: center;
		overflow: hidden;
	}
	
	.dialog-title {
		font-size: 36rpx;
		padding: 30rpx 30rpx 10rpx;
	}
	
	.dialog-content {
		padding: 10rpx 30rpx 20rpx;
		min-height: 80rpx;
		font-size: 32rpx;
		line-height: 1.3;
		word-wrap: break-word;
		word-break: break-all;
		color: #999999;
	}
	
	.dialog-footer {
		display: flex;
		align-items: center;
		position: relative;
		line-height: 90rpx;
		font-size: 34rpx;
	}
	
	.dialog-btn {
		display: block;
		-webkit-flex: 1;
		flex: 1;
		position: relative;
		font-size: 16px;
	}
	
	button {
		background-color: #fff;
		border-radius: 0;
	}
	
	button::after {
		border-radius: 0;
	}
</style>
